<template>
  <div id="navbar-left">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      style="width: 100%"
      :collapse="isCollapse"
    >
      <el-sub-menu index="1" v-if="id_kind == 0">
        <template #title>
          <el-icon><location /></el-icon>
          <span>顾客</span>
        </template>
        <el-menu-item-group>
          <template #title><span>点单</span></template>
          <el-menu-item index="1-1" @click="toPage('order-page', 1)"
            >我要点单</el-menu-item
          >
          <el-menu-item index="1-2" @click="toPage('order-page', 2)"
            >我要预定</el-menu-item
          >
        </el-menu-item-group>
        <el-menu-item-group>
          <template #title><span>推荐</span></template>
          <el-menu-item index="1-3" @click="toPage('food-rank')"
            >美食排行</el-menu-item
          >
          <el-menu-item index="1-4" @click="toPage('food-recommendation')"
            >个性推荐</el-menu-item
          >
        </el-menu-item-group>
        <el-menu-item-group>
          <template #title><span>个人</span></template>
          <el-menu-item index="1-5" @click="toPage('order-history')"
            >历史订单</el-menu-item
          >
          <el-menu-item index="1-6" @click="toPage('review-page')" v-if="false"
            >历史评价</el-menu-item
          >
          <el-menu-item index="1-7" @click="toPage('client-info')"
            >修改信息</el-menu-item
          >
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="2" v-if="id_kind == 1">
        <template #title>
          <el-icon><location /></el-icon>
          <span>服务员</span>
        </template>
        <el-menu-item-group>
          <template #title><span>通知</span></template>
          <el-menu-item index="2-1" @click="toPage('notice-info', 3)"
            >清理</el-menu-item
          >
          <el-menu-item index="2-2" @click="toPage('notice-info', 4)"
            >订单</el-menu-item
          >
        </el-menu-item-group>
        <el-menu-item-group>
          <template #title><span>个人</span></template>
          <el-menu-item index="2-3" @click="toPage('server-info')"
            >修改信息</el-menu-item
          >
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="3" v-if="id_kind == 2">
        <template #title>
          <el-icon><location /></el-icon>
          <span>厨师</span>
        </template>
        <el-menu-item-group>
          <template #title><span>菜品</span></template>
          <el-menu-item index="3-1" @click="toPage('undo-food')"
            >待完成</el-menu-item
          >
          <el-menu-item index="3-2" @click="toPage('cooked-food')"
            >已完成</el-menu-item
          >
          <el-menu-item index="3-3" @click="toPage('food-manage')"
            >管理</el-menu-item
          >
        </el-menu-item-group>
        <el-menu-item-group>
          <template #title><span>食材</span></template>
          <el-menu-item index="3-4" @click="toPage('material-manage')"
            >管理</el-menu-item
          >
        </el-menu-item-group>
        <el-menu-item-group>
          <template #title><span>个人</span></template>
          <el-menu-item index="3-5" @click="toPage('chef-info')"
            >修改信息</el-menu-item
          >
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu index="4" v-if="id_kind == 3">
        <template #title>
          <el-icon><location /></el-icon>
          <span>管理员</span>
        </template>
        <el-menu-item-group>
          <template #title><span>经营状况</span></template>
          <el-menu-item index="4-1" @click="toPage('revenue-situation')"
            >营收</el-menu-item
          >
          <el-menu-item index="4-2" @click="toPage('food-rank')"
            >菜品</el-menu-item
          >
          <el-menu-item index="4-3" @click="toPage('server-rank')"
            >服务</el-menu-item
          >
        </el-menu-item-group>
        <el-menu-item-group>
          <template #title><span>客户管理</span></template>
          <el-menu-item index="4-6" @click="toPage('client-manage')"
            >客户信息</el-menu-item
          ></el-menu-item-group
        >
        <el-menu-item-group>
          <template #title><span>管理</span></template>
          <el-menu-item index="4-4" @click="toPage('table-manage')"
            >桌位</el-menu-item
          >
        </el-menu-item-group>
        <el-menu-item-group>
          <template #title><span>个人</span></template>
          <el-menu-item index="4-5" @click="toPage('manager-info')"
            >修改信息</el-menu-item
          >
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script>
import { ref, computed } from "vue";
import router from "@/router";
// import store from "@/store/index";
import { useStore } from "vuex";

export default {
  name: "NavBarLeft",
  setup() {
    let store = useStore();
    let isCollapse = ref(false);
    let id_kind = computed(() => {
      return store.state.user.id_kind;
    });
    let toPage = (name, flag) => {
      router.push({ name: name });
      if (flag == 1) {
        store.commit("setIsPredetermine", false);
      } else if (flag == 2) {
        store.commit("setIsPredetermine", true);
      } else if (flag == 3) {
        store.commit("setNoticePage", 1);
      } else if (flag == 4) {
        store.commit("setNoticePage", 2);
      }
    };
    return {
      isCollapse,
      toPage,
      id_kind,
    };
  },
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
